<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 48
})
</script>

<template>
  <svg
    :width="props.size"
    :height="props.size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="recruitment-icon"
  >
    <defs>
      <linearGradient id="recruitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#7ee8fa;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#4facfe;stop-opacity:1" />
      </linearGradient>
    </defs>

    <!-- 书本背景 -->
    <rect x="12" y="10" width="40" height="44" rx="4" fill="url(#recruitGrad)" opacity="0.2"/>

    <!-- 书本主体 -->
    <rect x="14" y="12" width="36" height="40" rx="3" fill="url(#recruitGrad)"/>

    <!-- 书本装订线 -->
    <line x1="20" y1="12" x2="20" y2="52" stroke="white" stroke-width="2" opacity="0.5"/>

    <!-- 文字线条 -->
    <line x1="26" y1="22" x2="44" y2="22" stroke="white" stroke-width="2" stroke-linecap="round"/>
    <line x1="26" y1="28" x2="44" y2="28" stroke="white" stroke-width="2" stroke-linecap="round"/>
    <line x1="26" y1="34" x2="38" y2="34" stroke="white" stroke-width="2" stroke-linecap="round"/>

    <!-- 星星装饰 -->
    <circle cx="36" cy="42" r="4" fill="white" opacity="0.8"/>
    <circle cx="30" cy="44" r="2" fill="white" opacity="0.6"/>
  </svg>
</template>

<style scoped>
.recruitment-icon {
  transition: all 0.3s ease;
}

.recruitment-icon:hover {
  transform: scale(1.1) rotate(-5deg);
}
</style>
